<template>
    <div class="copywriting-view">
        <!-- 文件夹处理区域 -->
        <FolderProcessor @process-complete="handleProcessComplete" />

        <!-- 提示词编辑区域 -->
        <PromptEditor v-model="customPrompt" :loading="loading" />

        <el-row :gutter="20" class="content-row">
            <el-col :xs="24" :sm="24" :md="12">
                <!-- 文本列表区域 -->
                <TranscriptList :transcripts="transcripts" :loading="loading" @update:transcripts="updateTranscripts"
                    @generate="generateCopywritings" />
            </el-col>

            <el-col :xs="24" :sm="24" :md="12">
                <!-- 文案列表区域 -->
                <CopywritingList :copywritings="copywritings" :loading="loading"
                    @update:copywritings="updateCopywritings" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElMessage } from 'element-plus';
import FolderProcessor from './components/FolderProcessor.vue';
import PromptEditor from './components/PromptEditor.vue';
import TranscriptList from './components/TranscriptList.vue';
import CopywritingList from './components/CopywritingList.vue';
import copywritingService from '@/services/copywritingService';

export default defineComponent({
    name: 'CopywritingView',
    components: {
        FolderProcessor,
        PromptEditor,
        TranscriptList,
        CopywritingList
    },
    setup() {
        const transcripts = ref([]);
        const copywritings = ref([]);
        const loading = ref(false);
        const customPrompt = ref('');
        const apiKey = ref(''); // 新增：存储API Key

        // 处理文件夹处理完成事件
        const handleProcessComplete = (results, key) => { // 添加key参数
            if (!results || results.length === 0) {
                transcripts.value = [];
                return;
            }

            // 存储API Key
            if (key) {
                apiKey.value = key;
            }

            // 将结果转换为带选中状态的文本对象
            transcripts.value = results.map((item, index) => ({
                id: `transcript-${index}`,
                video_name: item.video_name || `视频-${index + 1}`,
                content: item.transcript || '',
                selected: true
            }));

            // 清空之前的文案
            copywritings.value = [];
        };

        // 更新文本数据 - 保持不变
        const updateTranscripts = (updatedTranscripts) => {
            transcripts.value = updatedTranscripts;
        };

        // 更新文案数据 - 保持不变
        const updateCopywritings = (updatedCopywritings) => {
            copywritings.value = updatedCopywritings;
        };

        // 生成文案 - 修改以使用API Key
        const generateCopywritings = async () => {
            // 过滤选中的文本
            const selectedTranscripts = transcripts.value.filter(t => t.selected);

            if (selectedTranscripts.length === 0) {
                ElMessage.warning('请选择至少一个视频文本');
                return;
            }

            if (!customPrompt.value) {
                ElMessage.warning('请提供文案生成提示词');
                return;
            }

            // 准备批量生成请求数据
            const requestData = selectedTranscripts.map(t => ({
                id: t.id,
                video_name: t.video_name,
                content: t.content
            }));

            loading.value = true;
            try {
                const result = await copywritingService.generateBatch(
                    requestData,
                    apiKey.value, // 传递API Key
                    customPrompt.value
                );

                if (result.success) {
                    copywritings.value = result.results || [];
                    ElMessage.success(`成功生成 ${copywritings.value.filter(c => c.success).length} 条文案`);
                } else {
                    throw new Error(result.message || '生成文案失败');
                }
            } catch (error) {
                ElMessage.error(`生成文案失败: ${error.message}`);
            } finally {
                loading.value = false;
            }
        };

        return {
            transcripts,
            copywritings,
            loading,
            customPrompt,
            apiKey, // 添加到返回值
            handleProcessComplete,
            updateTranscripts,
            updateCopywritings,
            generateCopywritings
        };
    }
});
</script>

<style scoped>
.copywriting-view {
    padding: 20px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.view-title {
    margin-bottom: 20px;
    color: #303133;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
}

.form-tip {
    font-size: 12px;
    color: #909399;
}

.content-row {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .content-row .el-col {
        margin-bottom: 20px;
    }
}
</style>